<template>
	<view class="page-content">
		<view class="top-layout">
			<!-- #ifdef MP -->
			<view style="height: 210rpx;"></view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view style="height: 140rpx;"></view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view style="height: 100rpx;"></view>
			<!-- #endif -->
			<view class="photo-layout">
				<assistant-computed-info type="avatar" :picture="playerInfo.picture" :avatar="playerInfo.sculptureUrl"></assistant-computed-info>
				<view class="center-row">
					<view class="user-name">{{playerInfo.name}}</view>
					<view class="birthday">{{playerInfo.birthdayTime}}</view>
				</view>
				<view class="edit-btn" @click="editUserInfo">编辑</view>
			</view>
			<view class="square-view" @click="mineSquareClick">
				<view class="num">{{playerInfo.showCount || 0}}</view>
				<view class="title">我的广场</view>
				<view class="manage-btn">管理</view>
			</view>
		</view>
		<view class="service-order">
			<view class="title-row" @click="mineOrderClick">
				<view class="title">服务订单</view>
				<view class="all">全部</view>
				<image class="img" :src="asserts.ic_arrow_right"></image>
			</view>
			<view class="item-row">
				<view class="order-item" @click="mineOrderClick(2)">
					<image :src="asserts.ic_order_status_new1"></image>
					<view>待服务</view>
				</view>
				<view class="order-item" @click="mineOrderClick(3)">
					<image :src="asserts.ic_order_status_new2"></image>
					<view>服务中</view>
				</view>
				<view class="order-item" @click="mineOrderClick(4)">
					<image :src="asserts.ic_order_status_new3"></image>
					<view>服务完成</view>
				</view>
				<view class="order-item" @click="mineOrderClick(6)">
					<image :src="asserts.ic_order_status_new4"></image>
					<view>拒绝订单</view>
				</view>
			</view>
		</view>
		
		<view class="bottom-view">
			<view class="bottom-item" @click="serviceAgreementClick">
				<image class="icon" :src="asserts.ic_user_agreement"></image>
				<view class="title">用户协议</view>
				<image class="right-img" :src="asserts.ic_arrow_right"/>
			</view>
			<view class="divider"></view>
			<view class="bottom-item" @click="privacyPoliciesClick">
				<image class="icon" :src="asserts.ic_privacy_policy"></image>
				<view class="title">隐私政策</view>
				<image class="right-img" :src="asserts.ic_arrow_right"/>
			</view>
			<view class="divider"></view>
			<view class="bottom-item" @click="accountSecurityClick">
				<image class="icon" :src="asserts.ic_account_safety"></image>
				<view class="title">账号安全</view>
				<image class="right-img" :src="asserts.ic_arrow_right"/>
			</view>
			<view class="divider"></view>
			<view class="bottom-item" @click="contactServiceClick">
				<image class="icon" :src="asserts.ic_contract_service"></image>
				<view class="title">客服电话</view>
				<view class="number">联系客服</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				playerInfo: {}
			}
		},
		mounted() {
			this.getPlayerInfo()
		},
		methods: {
			//用户详情（根据Token获取）
			getPlayerInfo(){
				this.requestCenter.getPlayerInfo().then(res => {
					this.playerInfo = res
				})
			},
			
			//编辑个人信息
			editUserInfo(){
				uni.navigateTo({
					url: '/pages/player-user-info/player-user-info'
				})
			},
			
			//我的广场点击
			mineSquareClick(){
				uni.navigateTo({
					url: '/pages/mine-square/mine-square?userId=' + this.playerInfo.id
				})
			},
			
			//我的订单
			mineOrderClick(index){
				uni.navigateTo({
					url: '/pages/player-order-list/player-order-list?index=' + index
				})
			},
			
			//用户协议
			serviceAgreementClick(){
				uni.navigateTo({
					url: "/pages/service-agreement/service-agreement"
				})
			},
			
			//隐私政策
			privacyPoliciesClick(){
				uni.navigateTo({
					url: "/pages/privacy-policies/privacy-policies"
				})
			},
			
			//账号安全
			accountSecurityClick(){
				uni.navigateTo({
					url: '/pages/account-security/account-security'
				})
			},
			
			//点击联系客服
			contactServiceClick(){
				uni.makePhoneCall({
					phoneNumber: this.contactPhone
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.page-content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-layout{
		width: 100%;
		background: linear-gradient( 180deg, #D8F8FA 0%, #F9F9F9 100%);
		display: flex;
		flex-direction: column;
		padding: 0 32rpx 0 32rpx;
		box-sizing: border-box;
		position: relative;
		.photo-layout{
			display: flex;
			flex-direction: row;
			align-items: center;
			.photo{
				width: 112rpx;
				height: 11rpx;
				border-radius: 50%;
				margin-right: 18rpx;
			}
			.center-row{
				flex: 1;
				display: flex;
				flex-direction: column;
				.user-name{
					color: #021624;
					font-size: 40rpx;
					font-weight: 500;
					line-height: 48rpx;
				}
				.birthday{
					color: #585F70;
					font-size: 24rpx;
					margin-top: 8rpx;
					line-height: 48rpx;
				}
			}
			.edit-btn{
				width: 176rpx;
				height: 64rpx;
				line-height: 64rpx;
				border-radius: 40rpx;
				border: 1rpx solid #01CBFF;
				font-size: 28rpx;
				color: #01CBFF;
				text-align: center;
			}
		}
		.square-view{
			width: 100%;
			height: 128rpx;
			margin-top: 48rpx;
			background-color: #00BBEB;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0 32rpx;
			box-sizing: border-box;
			.num{
				font-size: 36rpx;
				color: #FFFFFF;
				font-weight: 500;
				margin-right: 32rpx;
			}
			.title{
				font-size: 28rpx;
				color: #EEEEEE;
				flex: 1;
			}
			.manage-btn{
				width: 144rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				background: #FFFFFF;
				border-radius: 28rpx;
				font-size: 24rpx;
				color: #00BBEB;
			}
		}
	}
	.service-order {
		width: calc(100% - 64rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 28rpx 40rpx 32rpx 32rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
	
		.title-row {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 32rpx;
	
			.title {
				flex: 1;
				font-size: 32rpx;
				color: #021624;
				line-height: 48rpx;
				font-weight: 500;
			}
	
			.all {
				font-size: 28rpx;
				color: #ABAFB7;
				line-height: 44rpx;
				margin-right: 16rpx;
			}
	
			.img {
				width: 20rpx;
				height: 20rpx;
			}
		}
	
		.item-row {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			box-sizing: border-box;
			.order-item {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;
				color: #585F70;
				align-items: center;
	
				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 8rpx;
				}
			}
		}
	}
		
	.bottom-view{
		width: calc(100% - 64rpx);
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		.divider{
			width: 100%;
			height: 1rpx;
			background-color: #F5F5F5;
		}
		.bottom-item{
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.icon{
				width: 32rpx;
				height: 36rpx;
				margin-right: 20rpx;
			}
			.title{
				flex: 1;
				font-size: 28rpx;
				color: #585F70;
			}
			.right-img{
				width: 20rpx;
				height: 21rpx;
			}
			.number{
				font-size: 28rpx;
				color: #01CBFF;
			}
		}
	}
</style>
